<template>
  <div v-loading="formLoading">
    <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
      备注：一级菜单最多支持3个，每个一级下最多支持5个二级菜单
    </code>
    <div class="c-flex-row" style="min-width:1100px;">
      <div class="phone-container">
        <div class="phone-header"></div>
        <div class="phone-content">
          <h1>默认菜单</h1>
          <div class="nav-menu">
            <ul class="menu-ul">
              <li v-for="(menu,index) in menuData" :class="menuIndex==index?'li-active':''" :key="index">
                <div @click="liClickFunction(index,-2)" class="c-text-ellipsis1" style="width:65px;height: 32px;">{{ menu.name }}
                </div>
                <dl :class="{'menu-dl left50':index == 1, 'menu-dl left80':index == 2, 'menu-dl':index == 0}">
                  <dd v-for="(subMenu,sindex) in menu.sub_button"
                      :class="menuSindex==sindex && menuIndex==index?'active':''" :key="sindex"
                      @click="liClickFunction(index,sindex)">{{subMenu.name}}
                  </dd>
                  <dd v-if="menu.sub_button == null || menu.sub_button.length < 5" 　@click="liClickFunction(index,-1)">
                    +
                  </dd>
                  <div class="trangle"></div>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="footer-circle"></div>
      </div>
      <div class="setting-box">
        <div class="panel-box">
          <div class="panel">
            <h3>菜单设置
              <el-button v-if="permission == 3" type="danger" @click="deleteMenu">删除</el-button>
            </h3>
            <div style="text-align: center;margin-top: 20px;">
              <label style="margin-right: 50px;">类型:</label>
              <el-select style="width: 400px;" v-model="menuType" placeholder="请选择类型">
                <el-option key="0" value="公众号链接">
                </el-option>
                <el-option key="1" value="小程序链接">
                </el-option>
              </el-select>
            </div>
            <div style="text-align: center;">
              <label style="margin-right: 50px;">名称:</label>
              <el-input v-model="menuName" placeholder="请输入名称" style="width: 400px"></el-input>
            </div>
            <div style="text-align: center;"
                 v-show="(menuSindex >= -1) || (menuSindex == -2 && (menuData[menuIndex].sub_button == undefined || menuData[menuIndex].sub_button == null || menuData[menuIndex].sub_button.length == 0))">
              <label style="margin-right: 50px;">链接:</label>
              <el-input v-model="menuLink" placeholder="请输入名称" style="width: 400px"></el-input>
            </div>
            <div style="margin-top: 50px;">
              <h3>常用设置</h3>
              <div style="text-align: center;">
                <label for="" style="margin-right: 50px;">学员中心:</label>
                <el-input :readonly="true" v-model="memberCenterUrl" placeholder="请输入名称" style="width: 400px"></el-input>
              </div>
              <div style="text-align: center;">
                <label for="" style="margin-right: 50px;">升级会员:</label>
                <el-input :readonly="true" v-model="upgrateVipUrl" placeholder="请输入名称" style="width: 400px"></el-input>
              </div>
              <div style="text-align: center;">
                <label for="" style="margin-right: 50px;">我要推广:</label>
                <el-input :readonly="true" v-model="spreadUrl" placeholder="请输入名称" style="width: 400px"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p v-if="permission == 3" style="text-align: center;width: 700px">
      <el-button type="success" v-loading="btnLoading" @click="saveMenu">上架</el-button>
    </p>
  </div>
</template>

<script>
  import { getWxMenuSetting, saveWxMenuSetting } from '@/api/systemManage'
  import { shopManage_systemManage } from '@/utils/permission'
  export default {
    data() {
      return {
        permission: 3,
        menuName: '', // 菜单名称
        menuLink: '', // 菜单链接
        menuType: '公众号链接', // 类型
        memberCenterUrl: null,
        upgrateVipUrl: null,
        spreadUrl: null,
        menuData: [],
        menuIndex: 0,
        menuSindex: 0,
        btnLoading: false,
        formLoading: false
      }
    },
    mounted() {
      this.getModelPermission()
      this.initData()
    },
    watch: {
      menuName: function (val) {
        if (this.menuData.length > 0 && this.menuData[this.menuIndex].sub_button != undefined && this.menuData[this.menuIndex].sub_button.length > 0) {
          this.menuData[this.menuIndex].sub_button[this.menuSindex].name = val
        } else if (this.menuData.length > 0 && (this.menuData[this.menuIndex].sub_button == undefined || this.menuData[this.menuIndex].sub_button.length == 0)) {
          this.menuData[this.menuIndex].name = val
        }
        console.log(this.menuData)
      },
      menuLink: function (val) {
        if (this.menuData.length > 0 && this.menuData[this.menuIndex].sub_button != undefined && this.menuData[this.menuIndex].sub_button.length > 0) {
          this.menuData[this.menuIndex].sub_button[this.menuSindex].url = val
        } else if (this.menuData.length > 0 && (this.menuData[this.menuIndex].sub_button == undefined || this.menuData[this.menuIndex].sub_button.length == 0)) {
          this.menuData[this.menuIndex].url = val
        }
      },
      menuType: function (val) {
        let t = 'view'
        if (val == '公众号链接') {
          t = 'view'
        } else {
          t = 'miniprogram'
        }
        if (this.menuData.length > 0 && this.menuData[this.menuIndex].sub_button != undefined && this.menuData[this.menuIndex].sub_button.length > 0) {
          this.menuData[this.menuIndex].sub_button[this.menuSindex].type = t
        } else if (this.menuData.length > 0 && (this.menuData[this.menuIndex].sub_button == undefined || this.menuData[this.menuIndex].sub_button.length == 0)) {
          this.menuData[this.menuIndex].type = t
        }
      }
    },
    methods: {
      getModelPermission() {
        this.permission = shopManage_systemManage()
      },
      initData() {
        getWxMenuSetting().then(res => {
          console.log(res)
          const resData = res.data.data
          if (resData.menus) {
            this.menuData = resData.menus
          }
          this.memberCenterUrl = resData.memberCenterUrl
          this.upgrateVipUrl = resData.upgrateVipUrl
          this.spreadUrl = resData.spreadUrl
          if (this.menuData.length > 0 && this.menuData[0].sub_button != undefined && this.menuData[0].sub_button.length > 0) {
            this.menuName = this.menuData[0].sub_button[0].name
            this.menuLink = this.menuData[0].sub_button[0].url
            this.menuType = this.menuData[0].sub_button[0].type == undefined || this.menuData[0].sub_button[0].type == 'view' ? '公众号链接' : '小程序链接'
          } else if (this.menuData.length > 0 && (this.menuData[0].sub_button == undefined || this.menuData[0].sub_button.length == 0)) {
            this.menuName = this.menuData[0].name
            this.menuLink = this.menuData[0].url
            this.menuType = this.menuData[0].type == undefined || this.menuData[0].type == 'view' ? '公众号链接' : '小程序链接'
          }
        }).catch(err => {
          console.log(err)
        })
      },
      liClickFunction(index, sindex) {
        this.menuIndex = index
        this.menuSindex = sindex
        if (sindex >= -1) {
          this.menuName = sindex == -1 ? '子菜单名称' : this.menuData[index].sub_button[sindex].name
          this.menuLink = sindex == -1 ? '' : this.menuData[index].sub_button[sindex].url
          this.menuType = sindex == -1 ? '公众号链接' : (this.menuData[index].sub_button[sindex].type == 'view' ? '公众号链接' : '小程序链接')
        } else {
          this.menuName = this.menuData[index].name
          if (this.menuData[index].sub_button == undefined || this.menuData[index].sub_button == null || this.menuData[index].sub_button.length == 0) {
            this.menuType = this.menuData[index].type == undefined || this.menuData[index].type == 'view' ? '公众号链接' : '小程序链接'
            this.menuLink = this.menuData[index].url
            this.menuData[index].type = this.menuData[index].type == undefined || this.menuData[index].type == 'view' ? 'view' : 'miniprogram'
            this.menuData[index].url = this.menuLink
          } else {
            this.menuLink = ''
            this.menuType = '公众号链接'
          }
        }
        if (sindex == -1) {
          this.menuName = '子菜单名称'
          var obj = {name: '', type: 'view', url: ''}
          obj.name = this.menuName
          if (this.menuData[index].sub_button != null && this.menuData[index].sub_button.length > 0) {
            this.menuSindex = this.menuData[index].sub_button.length
          } else {
            this.menuSindex = 0
          }
          this.menuData[this.menuIndex].sub_button.push(obj)
        }
        /* this.$nextTick(function () {
         this.menuData.forEach(function (menu) {
         Vue.set(menu,'active',false);
         });
         Vue.set(menu,'active',true);
         }) */
      },
      deleteMenu() {
        if (this.menuSindex >= 0) {
          this.menuData[this.menuIndex].sub_button.splice(this.menuSindex, 1)
        } else {
          this.menuData[this.menuIndex].splice(this.menuIndex, 1)
        }
        if (this.menuData[this.menuIndex].sub_button == undefined || this.menuData[this.menuIndex].sub_button == null || this.menuData[this.menuIndex].sub_button.length == 0) {
          this.menuType = this.menuData[this.menuIndex].type == undefined || this.menuData[this.menuIndex].type == 'view' ? '公众号链接' : '小程序链接'
          this.menuLink = this.menuData[this.menuIndex].url == undefined || this.menuData[this.menuIndex].url ? '' : this.menuData[this.menuIndex].url
          this.menuName = this.menuData[this.menuIndex].name
          this.menuData[this.menuIndex].type = this.menuData[this.menuIndex].type == undefined || this.menuData[this.menuIndex].type == 'view' ? 'view' : 'miniprogram'
          this.menuData[this.menuIndex].url = this.menuData[this.menuIndex].url == undefined || this.menuData[this.menuIndex].url ? '' : this.menuData[this.menuIndex].url
        } else {
          this.menuType = this.menuData[this.menuIndex].sub_button[this.menuSindex].type == undefined || this.menuData[this.menuIndex].sub_button[this.menuSindex].type == 'view' ? '公众号链接' : '小程序链接'
          this.menuLink = this.menuData[this.menuIndex].sub_button[this.menuSindex].url
          this.menuName = this.menuData[this.menuIndex].sub_button[this.menuSindex].name
        }
      },
      saveMenu() {
        if (this.btnLoading) {
          return
        }
        this.btnLoading = true
        this.formLoading = true
        console.log(this.menuData)
        saveWxMenuSetting(this.menuData).then(res => {
          this.btnLoading = false
          this.formLoading = false
          this.$message.success('保存成功')
        }).catch(err => {
          this.btnLoading = false
          this.formLoading = false
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .phone-container {
    width: 348px;
    border: 1px solid #eee;
    margin: 20px 0 20px 20px;
    border-radius: 18px;
    position: relative;
    padding-bottom: 90px;
  }

  .phone-header {
    width: 100%;
    height: 60px;
    background: url("../../../../build/iphone_head.jpg") no-repeat center center;
  }

  .phone-content {
    margin: 0 15px;
    position: relative;
  }

  .phone-content h1 {
    background: url("../../../../build/titlebar.jpg") no-repeat;
    margin: 0;
    padding: 18px 60px 0 60px;
    height: 64px;
    line-height: 46px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    left: -1px;
    right: -1px;
  }

  .nav-menu {
    height: 380px;
    border: 1px solid #ccc;
  }

  .menu-ul {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    width: 100%;
    line-height: 36px;
    border: 1px solid #eee;
    color: #333;
  }

  .menu-ul li {
    float: left;
    list-style: none;
    padding: 0 18px;
  }

  li span {
    cursor: pointer;
  }

  .li-active {
  	border-bottom: 1px solid #13CE66;
  }

  .active {
    border: 1px solid #13CE66;
  }

  .unactive {
    border: 1px solid #eee
  }

  .menu-dl {
    margin: 0;
    display: block;
    position: absolute;
    z-index: 220;
    bottom: 40px;
    left: 15%;
    width: 85px;
    margin-left: -45px;
    min-height: 40px;
    background: #fff;
    border: 1px solid #afaeaf;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 3px #fff;
    text-align: center;
  }

  dd {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #F0F0EE;
    padding: 5px 0;
    cursor: pointer;
  }

  .trangle {
    z-index: 241;
    margin-bottom: -15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 8px solid red;
    margin-left: -9px;
    border-color: #afaeaf transparent transparent transparent;
  }

  .left50 {
    left: 50%;
  }

  .left80 {
    left: 85%;
  }

  .footer-circle {
    position: absolute;
    bottom: 20px;
    left: 145px;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 100%;
  }

  .setting-box {
    margin: 70px 0 0 50px;
    border: 1px solid #eee;
    width: 700px;
    height: 554px;
  }

  .panel-box {
    padding: 12px 10px;
    background: #F6F6F6;
    height: 490px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  .panel {
    border: 1px solid #ccc;
    background: #fff;
    height: 100%;
    padding: 15px;
  }

  .panel div {
    line-height: 50px;
  }

  h3 {
    padding: 0;
    margin: 0;
    font-size: 14px;
  }

  h3 button {
    float: right;
  }

  label {
    font-weight: 500;
  }
</style>
